html,
body,
span,
div,
img,
p {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
}

.top-box {
  position: relative;
  margin-bottom: 0.625rem /* 240/384 */;
}
.top-box img {
  width: 10rem /* 3840/384 */;
  height: 1.96875rem /* 756/384 */;
}
.top-box .content {
  position: absolute;
  top: 0.151042rem /* 58/384 */;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 7.03125rem /* 2700/384 */;
}
.top-box .box-left-top {
  display: flex;
  padding-top: 0.119792rem /* 46/384 */;
  margin-bottom: 0.338542rem /* 130/384 */;
}
.top-box .box-left-top .logo {
  width: 0.296875rem /* 114/384 */;
  height: 0.286458rem /* 110/384 */;
  margin-right: 0.072917rem /* 28/384 */;
}
.top-box .box-left-top p {
  font-size: 0.182292rem /* 70/384 */;
  font-weight: 600;
  color: #fff;
  line-height: 0.338542rem; /* 130/384 */
  letter-spacing: 0.16em;
}
.top-box .box-left-bottom p {
  font-size: 0.182292rem /* 70/384 */;
  color: #fff;
  margin-bottom: 0.078125rem /* 30/384 */;
  letter-spacing: 0.14em;
}
.top-box .box-right {
  width: 1.84375rem /* 708/384 */;
  height: 1.822917rem /* 700/384 */;
}

.bottom-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 7.03125rem /* 2700/384 */;
  margin: 0 auto;
}
.bottom-box .bottom-box-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 .338542rem /* 130/384 */ .286458rem /* 110/384 */;
  cursor: pointer;
}
.bottom-box .bottom-box-item img {
  width: 0.559896rem /* 215/384 */;
  height: 0.565104rem /* 217/384 */;
  margin-bottom: 0.104167rem /* 40/384 */;
}
.bottom-box .bottom-box-item p {
  font-size: 0.117188rem /* 45/384 */;
  color: #333;
}
